<!doctype html> 
<html> 
<head> 
<style> 
html, body {
	height:100%;
	width:100%;
}
body {
	padding:0;
	margin:0;
}
.cursor {
	position	: absolute;
	width		: 24px;
	height		: 24px;
	background-image:url("");
}
</style> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
<script src="https://github.com/jeromeetienne/EasyWebsocket/raw/master/easyWebSocket.min.js"></script> 
<script> 
 
jQuery(function() { 
var socket = new EasyWebSocket("ws://cursors/moving/smooth")
  , me = Math.floor(Math.random() * 1000000).toString(32)
  , cursors = {}
  , tail = [];
 
cursors[me] = jQuery('<div/>').attr('id', me).addClass('cursor').appendTo('body');
 
socket.onopen	= function() {
	setInterval(function(){
		if( mouseCurX == mouseOldX && mouseCurY == mouseOldY )	return;
		socket.send(me + ' ' + tail.join(' '));
    tail = [];
		mouseOldX	= mouseCurX;
		mouseOldY	= mouseCurY;
	}, 100)
}
 
socket.onmessage = function(event) {
	var data = event.data.split(' ')
    , id = data.shift();
  
  if (id === me) return
 
  if (typeof cursors[id] === 'undefined') {
		cursors[id] = jQuery('<div/>').attr('id', id).addClass('cursor').appendTo('body');
	}
  
  var inc = 0
    , mul = Math.floor(100 / (data.length || 1));
  data.forEach(function(xy) {
    inc++;
    setTimeout(function() {
      xy = xy.split(',');
      cursors[id].css({ left: xy[0] + 'px', top: xy[1] + 'px' });
    }, mul * inc);
  })
}
 
var mouseCurX	= 0;
var mouseCurY	= 0;
var mouseOldX	= 0;
var mouseOldY	= 0;
 
$('body').bind('mousemove', function(e){
	mouseCurX	= e.pageX;
	mouseCurY	= e.pageY;
  tail.push([ mouseCurX, mouseCurY ]);
  cursors[me].css({ left: mouseCurX + 'px', top: mouseCurY + 'px' });
})
 
})
</script> 
 
</head> 
<body> 
</body> 
</html>